<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
/*
0 如果想要让表单数据由DOM处理(及数据不保存在React的状态里 而是保存在Dom中)
   那么可以使用非受控组件 使用非受控组件 可以无需为每个状态更新编写事件处理程序 使用ref即可   
   借助ref 使用原生DOM 方式来获取表单元素值 
   (ref作用: 获取DOM后组件, 用来获取组件实例对象或者是 DOM 对象) 


1 使用步骤 调用React.createRef()方法创建一个ref对象 
        constructor(){
            super()
            this.txtRef = React.createRef()
        }
2 将创建好的ref对象添加到文件中 关联 
        <input type="text" ref={this.txtRef} />
3 通过ref对象获取到文本框的值  
        console.log(this.txtRef.current.value)

在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，
但是某些特殊的情况，确实需要获取到DOM进行某些操作 */ 
class Forms extends React.Component {
    constructor(){
        super()
        this.txtRef = React.createRef()
    }
    getTxt = () =>{
        console.log("文本框的值获取",this.txtRef.current.value)
    }

 render() {
   return (
     <div>
       <input type="text"  ref={this.txtRef}/>
       <button onClick={this.getTxt} >get 一下啊</button>
     </div>
   );
 }
}
ReactDOM.render(<Forms/>,document.getElementById("root"))

// 对于非受控组件，如果要指定默认值，那么可以使用defaultValue
// <input type="text" defaultValue="Hello" ref={input => this.input = input} />
// 相应的 type="checkbox"和type="radio"，则使用defaultChecked

</script>